<template>
  <el-card>
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="query">
        <el-form-item>
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="query.cusName"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            plain
            @click="loadOrders"
          ></el-button>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="query.dateRange"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" plain @click="loadOrders"></el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="success" @click="handleclear()">新建</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="ordersList"
      border
      style="width: 100%"
      :cell-style="{ 'text-align': 'center' }"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column prop="ordersNo" label="订单编号" width="200px">
      </el-table-column>
      <el-table-column prop="creatTime" label="创建时间"> </el-table-column>
      <el-table-column prop="cusName" label="客户姓名"> </el-table-column>
      <el-table-column prop="ordersPrice" label="订单价格"> </el-table-column>
      <el-table-column prop="status" label="订单状态">
        <template slot-scope="scope">
          {{ scope.row.status == 0 ? "未完成" : "已完成" }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="订单备注">
        <template slot-scope="scope">
          {{ scope.row.remark == null ? "无" : scope.row.remark }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300px">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            @click="handleEdit(scope.row.ordersNo)"
            >编辑</el-button
          >
          <el-popconfirm
            title="这是一段内容确定删除吗？"
            @confirm="handleDelete(scope.row.ordersNo)"
          >
            <el-button
              type="danger"
              slot="reference"
              size="small"
              icon="el-icon-delete"
              >删除</el-button
            >
          </el-popconfirm>
          <el-button
            type="info"
            icon="el-icon-edit"
            size="small"
            @click="handleLook(scope.row.ordersNo)"
            >查看明细</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="工单转换" width="100px">
        <template slot-scope="scope">
          <el-button type="success" @click="handleTicket(scope.row.ordersNo)"
            >转换</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.currentPage"
      :page-sizes="pageInfo.pageSizes"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
    <!-- --------------------------添加---------------------- -->
    <el-dialog title="新增订单" :visible.sync="dialog.addShow" width="30%">
      <el-form ref="addForm" :model="addForm" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="订单编号" hidden>
              <el-input
                v-model="addForm.ordersNo"
                placeholder="请输入订单编号"
              ></el-input>
            </el-form-item>
            <el-form-item label="创建时间" hidden>
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="addForm.creatTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="客户编号">
              <el-input
                v-model="addForm.cusId"
                placeholder="请输入客户编号"
              ></el-input>
            </el-form-item>
            <el-form-item label="订单价格">
              <el-input-number
                :precision="2"
                :step="0.5"
                :min="0"
                v-model="addForm.ordersPrice"
                placeholder="请输入订单价格"
              ></el-input-number>
            </el-form-item>

            <!-- ----------------------------- -->
            <el-form-item label="订单数量">
              <el-input-number
                :min="1"
                :max="1000"
                v-model="addForm.count"
                placeholder="请输入订单数量"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="产品编号">
              <el-input
                v-model="addForm.productId"
                placeholder="请输入产品编号"
              ></el-input>
            </el-form-item>
            <el-form-item label="订单进度" hidden>
              <el-input
                v-model="addForm.ordersProgress"
                placeholder="请输入进度"
              ></el-input>
            </el-form-item>
            <el-form-item label="订单状态">
              <el-input
                v-model="addForm.status"
                placeholder="请输入状态(0未支付1已支付)"
              ></el-input>
            </el-form-item>
            <el-form-item label="订单进度" hidden>
              <el-input
                v-model="addForm.price"
                placeholder="请输入进度"
              ></el-input>
            </el-form-item>
            <el-form-item label="订单备注">
              <el-input
                v-model="addForm.remark"
                placeholder="请输入备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.addShow = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- --------------------------添加工单---------------------- -->
    <el-dialog
      title="添加工单"
      :visible.sync="dialog.addTicketShow"
      width="30%"
    >
      <el-form ref="addFormTickets" :model="addFormTickets" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="订单编号" hidden>
              <el-input
                v-model="addFormTickets.ordersNo"
                placeholder="请输入订单编号"
              ></el-input>
            </el-form-item>
            <el-form-item label="负责人">
              <!-- <el-input
                v-model="addFormTickets.workNo"
                placeholder="请输入负责人"
              ></el-input> -->
              <el-cascader
                v-model="optionList"
                :options="options"
                @change="handleOptionChange"
                style="width: 100%"
              >
              </el-cascader>
            </el-form-item>
            <el-form-item label="创建时间" hidden>
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="addFormTickets.ticketTime"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>

            <el-form-item label="工单状态" hidden>
              <el-select
                v-model="addFormTickets.status"
                placeholder="请输入状态(0未支付1已支付)"
                style="width: 100%"
              >
                <el-option :key="0" label="未完成" :value="0"> </el-option>
                <el-option :key="1" label="已完成" :value="1"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="产品名称" hidden>
              <el-input
                v-model="addFormTickets.productId"
                placeholder="请输入产品名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="需求产品数" hidden>
              <el-input
                v-model="addFormTickets.count"
                placeholder="请输入需求产品数"
              ></el-input>
            </el-form-item>

            <el-form-item label="备注" hidden>
              <el-input
                v-model="addFormTickets.remark"
                placeholder="请输入备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.addTicketShow = false">取 消</el-button>
        <el-button type="primary" @click="addTickets()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- --------------------------修改---------------------- -->
    <el-dialog title="编辑订单" :visible.sync="dialog.updateShow" width="40%">
      <el-form ref="updateForm" :model="updateForm" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="创建时间">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="updateForm.creatTime"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="客户编号">
              <el-input
                v-model="updateForm.cusId"
                placeholder="请输入客户编号"
              ></el-input>
            </el-form-item>
            <el-form-item label="订单价格">
              <el-input-number
                :precision="2"
                :step="0.5"
                :min="0"
                v-model="updateForm.ordersPrice"
                placeholder="请输入订单价格"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="订单状态">
              <el-select
                v-model="updateForm.status"
                placeholder="请选择状态"
                style="width: 100%"
              >
                <el-option key="0" value="0" label="未支付"> </el-option>
                <el-option key="1" value="1" label="已支付"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="订单备注">
              <el-input
                v-model="updateForm.remark"
                placeholder="请输入备注"
              ></el-input>
            </el-form-item>
            <el-form-item label="编号" hidden>
              <el-input v-model="updateForm.ordersNo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateShow = false">取 消</el-button>
        <el-button type="primary" @click="updateOrders()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- --------------------------订单详情---------------------- -->
    <el-drawer
      title="订单详情列表"
      :visible.sync="drawer.lookDetails"
      direction="rtl"
      size="36%"
    >
      <el-table
        :data="ordersDetailsList"
        :cell-style="{ 'text-align': 'center' }"
        :header-cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column
          property="ordersNo"
          label="订单编号"
          width="200"
        ></el-table-column>
        <el-table-column
          property="count"
          label="订单数量"
          width="80"
        ></el-table-column>
        <el-table-column
          property="productName"
          label="产品名称"
          width="80"
        ></el-table-column>
        <el-table-column property="ordersProgress" label="订单进度" width="100">
          <template slot-scope="scope">
            <el-progress
              :text-inside="true"
              :stroke-width="26"
              :percentage="scope.row.ordersProgress"
              :color="colors"
            >
            </el-progress>
          </template>
        </el-table-column>

        <el-table-column
          property="price"
          label="价格"
          width="80"
        ></el-table-column>
      </el-table>
    </el-drawer>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      options: [],
      optionList: [],
      updateForm: {},
      addForm: {},
      addFormTickets: {},
      drawer: {
        lookDetails: false
      },
      colors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#6f7ad3", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#5cb87a", percentage: 100 }
      ],
      dialog: {
        addShow: false,
        updateShow: false,
        addTicketShow: false
      },
      pageInfo: {
        pageSizes: [5, 10, 15, 20],
        total: 0
      },
      query: {
        currentPage: 1,
        pageSize: 5,
        dateRange: [],
        cusName: ""
      },
      ordersList: [],
      ordersDetailsList: [],
      orderTicketList: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value1: "",
      value2: ""
    };
  },
  methods: {
    handleclear() {
      this.dialog.addShow = true;
      this.addForm = {};
    },
    handleOptionChange() {
      this.addFormTickets.workNo = this.optionList[this.optionList.length - 1];
    },
    loadOptions() {
      this.$axios
        .post("/emps/2")
        .then(res => {
          if (res.data.code == 200) {
            this.options = res.data.data.vos;
          }
        })
        .catch(err => {
          console.error(err);
        });
    },

    handleSizeChange(val) {
      this.query.pageSize = val;
      this.loadOrders();
    },
    handleCurrentChange(val) {
      this.query.currentPage = val;
      this.loadOrders();
    },
    loadOrders() {
      this.$axios.post("orders/queryAll", this.query).then(res => {
        this.ordersList = res.data.data.list;
        this.pageInfo.total = res.data.data.total;
      });
    },
    handleLook(ordersNo) {
      this.$axios.get("orders/allDetails/" + ordersNo).then(res => {
        if (res.data.code == 200) {
          //this.$message.success(res.data.message);
          this.drawer.lookDetails = true;
          // this.loadDetails();
          this.ordersDetailsList = res.data.data.detailsVOS;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    addTickets() {
      this.$axios.post("orders/tickets", this.addFormTickets).then(res => {
        if (res.data.code == 200) {
          this.addFormTickets = {};
          this.$message.success(res.data.message);
          this.dialog.addTicketShow = false;
          this.loadOrders();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    add() {
      this.addForm.price = this.addForm.ordersPrice;
      this.$axios.post("orders/ordersdetails", this.addForm).then(res => {
        if (res.data.code == 200) {
          this.addForm = {};
          this.$message.success(res.data.message);
          this.dialog.addShow = false;
          this.loadOrders();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handleEdit(ordersNo) {
      this.$axios.get("orders/" + ordersNo).then(res => {
        this.updateForm = res.data.data.orders;
      });
      this.addFormTickets.ordersNo = ordersNo;
      this.dialog.updateShow = true;
    },
    handleTicket(ordersNo) {
      this.$axios.get("orders/orderTicket/" + ordersNo).then(res => {
        //this.orderTicketList = res.data.data.ordersTicketVOS;
        this.addFormTickets = res.data.data.ordersTicketVOS;
      });
      // this.addFormTickets.ordersNo = ordersNo;

      this.dialog.addTicketShow = true;
    },
    updateOrders() {
      this.$axios.put("orders", this.updateForm).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message);
          this.dialog.updateShow = false;
          this.loadOrders();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handleDelete(ordersNo) {
      this.$axios.delete("orders/" + ordersNo).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message);
          this.loadOrders();
        } else {
          this.$message.error(res.data.message);
        }
      });
    }
  },
  mounted() {
    this.loadOrders();
    this.loadOptions();
  }
};
</script>
